<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>			
		<title></title>
		<style>
			::-webkit-scrollbar {display:none}
		</style>
		<style>
			div.speech {
			    float: left;
			    margin: 10px 0;
			    padding: 8px;
			    table-layout: fixed;
			    word-break: break-all;
			    position: relative;
			    background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c) );
			    border: 1px solid #989898;
			    border-radius: 8px;
			}
			div.speech:before {
			    content: '';
			    position: absolute;
			    width: 0;
			    height: 0;
			    left: 15px;
			    top: -20px;
			    border: 10px solid;
			    border-color: transparent transparent #989898 transparent;
			}
			div.speech:after {
			 content: '';
			 position: absolute;
			 width: 0;
			 height: 0;
			 left: 17px;
			 top: -16px;
			 border: 8px solid;
			 border-color: transparent transparent #ffffff transparent;
			}
			div.speech.right {
			 display: inline-block;
			 box-shadow: -2px 2px 5px #CCC;
			 margin-right: 10px;
			 max-width: 60%;
			 float: right;
			 background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40) );
			}
			div.speech.right:before {
			 content: '';
			 position: absolute;
			 width: 0;
			 height: 0;
			 top: 9px;
			 bottom: auto;
			 left: auto;
			 right: -10px;
			 border-width: 9px 0 9px 10px;
			 border-color: transparent #989898;
			}
			div.speech.right:after {
			 content: '';
			 position: absolute;
			 width: 0;
			 height: 0;
			 top: 10px;
			 bottom: auto;
			 left: auto;
			 right: -8px;
			 border-width: 8px 0 8px 9px;
			 border-color: transparent #bced50;
			}
			div .left {
			 display: inline-block;
			 box-shadow: 2px 2px 2px #CCCCCC;
			 margin-left: 10px;
			 max-width: 60%;
			 position: relative;
			 background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #eae8e8), color-stop(0.4, #E3E3E3), color-stop(0.8, #DFDFDF), to(#D9D9D9) );
			}
			div .left:before {
			 content: '';
			 position: absolute;
			 width: 0;
			 height: 0;
			 top: 9px;
			 bottom: auto;
			 left: -10px;
			 border-width: 9px 10px 9px 0;
			 border-color: transparent #989898;
			}
			div .left:after {
			 content: '';
			 position: absolute;
			 width: 0;
			 height: 0;
			 top: 10px;
			 bottom: auto;
			 left: -8px;
			 border-width: 8px 9px 8px 0;
			 border-color: transparent #eae8e8;
			}
			.leftimg {
			 float: left;
			 margin-top: 10px;
			}
			.rightimg {
			 float: right;
			 margin-top: 10px;
			}
			.leftd {
			 clear: both;
			 float: left;
			 margin-left: 10px;
			}
			.rightd {
			 clear: both;
			 float: right;
			 margin-right: 10px;
			}
			
			.leftd_h{
			 width: 39px;
			 height: 39px;
			 border-radius: 100%;
			 display: block;
			 float: left;
			 overflow: hidden;
			}
			
			.leftd_h img{
			 display: block;
			 width: 100%;
			 height: auto;
			}
			.rightd_h{
			 width: 39px;
			 height: 39px;
			 border-radius: 100%;
			 display: block;
			 float: right;
			 overflow: hidden;
			}
			
			.rightd_h img{
			 display: block;
			 width: 100%;
			 height: auto;
			}					
		</style>
	</head>
	<body style="background-color: darkgrey;">
		<div id="app" >
			<table style="border:none; padding: 10px; margin-left: 17%; margin-top: 40px;">
				<tr>
					<td style="width: 200px;">
						<span id="" style="background-color: #47CB89; height: 50px; width: 200px; display: block;">
							<input id="messageslistbtn" type="image" src="../img/message.png" style="height: 40px; width: 40px; margin-left: 40px; margin-top: 5px;"/>
							<input id="friendslistbtn" type="image" src="../img/user.png" style="height: 40px; width: 40px; margin-left: 30px; margin-top: 5px;"/>	
						</span>
						<!--信息列表-->
			            <div id="messagelist" style="height: 400px; background-color: azure; overflow-y: scroll; overflow: -moz-hidden-unscrollable">
			            </div>
			            <!--好友列表-->
			            <div id="frendslist" style="height: 400px; background-color: azure; overflow-y: scroll; overflow: -moz-hidden-unscrollable; display: none;">
			            	<i-button style="width: 200px;">添加好友</i-button>
			            	<div class="friendsitem" id="123456" style="height: 50px; width: 200px; background-color: #C0C0C0;" data-usernumber=123456 > 好友：123456(测试)</div>
			            	<div class="friendsitem" id="654321" style="height: 50px; width: 200px; background-color: #C0C0C0;" data-usernumber=654321 > 好友：654321(测试)</div>
			            </div>
					</td>
					<td style="padding: 20px;">
						<div style="height: 450px; width:500px;background-color: azure; border: 1px solid; border-radius: 10px;">
							<div style="height: 40px;">
								 <i-button style="margin-left: 30px; margin-top: 5px;">返回</i-button>
								 
							</div>
							<hr />
							<!--聊天板-->
							<div id="chatContent" style="height: 350px; overflow-y: scroll; overflow: -moz-hidden-unscrollable; ">
								
							</div>
							<hr />
							<!--输入板-->
							<span style="height: 50px; display: block; border-radius: 10px;">
								<icon type="md-person" size="34" style="margin-left: 20px; margin-top: 10px;"></icon>
								<i-input v-model="value" style="width: 350px; margin-left: 20px; margin-top: 10px;"></i-input>
								<i-button id="sendmsgbtn" style="margin-left: 0px; margin-top: 10px;" @click="handlesendmsg()">发送</i-button>
							</span>
						</div>						
					</td>
				</tr>				
			</table>
			<i-button id="addlistbtn" style="margin-left: 19%;">添加好友(用于测试)</i-button>
			<i-button id="testlogin">登录(用于测试)</i-button>
		</div>
	</body>
	<script src="../js/jquery.js"></script>
	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				value: '',
			},
			methods: {
				handlesendmsg() {
					/*let msgHtml = "<div style='float: right;'>" + this.value + "</div></br>";				*/
					let msgHtml = "<div class='rightd'>"+
								      "<span class='rightd_h'>"+
										    "<img src='../img/cat_head.png' />"+
                                      "</span>"+
								
								   " <div class='speech right' ng-class='speech left'>"+
								        this.value+
										"</div>"+
								    "</div>";
					$("[paneid ='"+window.sendmessageto + "']").append(msgHtml);
					$("[paneid ='"+window.sendmessageto + "']").scrollTop(99999);
					/*this.value = '';*/					
				},

			}
		})
	</script>
	<script>
		$(document).on("click", ".friendsitem", function(event){
			that = this;
			var messageitems = $("#messagelist .messageitem");
			if (messageitems.length > 0) {
				let isAppend = true;
				$(messageitems).each(function(index) {
					if ($(this).attr('id') == $(that).attr('id')) {
						isAppend = false;
					} 
				})
				if (isAppend) {
					let selected = $(event.target).clone(true).attr({
						"ID": $(that).attr("id"),
						"class": "messageitem"
					});
					$("#messagelist").append(selected).scrollTop;
					$("[paneid ='"+window.sendmessageto + "']").hide();
					let chatPaneHtml = "<div paneid='" + $(that).attr('id') + "' style='height: 350px; background-color: azure; overflow-y: scroll; overflow: -moz-hidden-unscrollable;'>" + $(that).attr('id')+ "</div>"
					$("#chatContent").append(chatPaneHtml);
					window.sendmessageto = $(that).attr("id");
				} else {
					if (window.sendmessageto != $(that).attr('id')) {
						$("[paneid ='"+window.sendmessageto + "']").hide();
						$("[paneid ='"+$(that).attr('id') + "']").show();
						window.sendmessageto = $(that).attr('id');
					}
					
				}
			} else {
				let selected = $(event.target).clone(true).attr({
					"ID": $(that).attr("id"),
					"class": "messageitem"
				});
				$("#messagelist").append(selected);
				let chatPaneHtml = "<div paneid='" + $(that).attr("id") + "' style='height: 350px; background-color: azure; overflow-y: scroll; overflow: -moz-hidden-unscrollable;'>" + $(that).attr("id")+ "</div>"
				$("#chatContent").append(chatPaneHtml);
				window.sendmessageto = $(that).attr("id");
			}
		})
		
		
		$(document).on("click", ".messageitem", function(event){			
        	if (window.sendmessageto != $(this).attr('id')) {
				$("[paneid ='"+window.sendmessageto + "']").hide();
				$("[paneid ='"+$(this).attr('id') + "']").show();
				window.sendmessageto = $(this).attr('id');
			}
        		
		})		
	</script>
	<script>
		window.sendto;
		window.sendmessageto = ''; //当前显示的聊天板
		var i = 123456;
		$("#addlistbtn").click(function() {
			$('#frendslist').append("<div class='messageitem' style='height: 50px; width: 200px; background-color: #C0C0C0; ' data-usernumber=' " + i + "'> 好友：" + i + " </div>");
    		i++;
		})
    	
    	$("#messageslistbtn").click(function() {
    		$("#messagelist").show();
    		$("#frendslist").hide();
    	})
        
        $("#friendslistbtn").click(function() {
        	$('#frendslist').show();
        	$("#messagelist").hide();
        })
        

	</script>
</html>
